<template>
    <div>
        <div class="top-part">
            <img :src="playDetail.coverImgUrl" class="bg-img">

            <div class="title-box">
                <div class="title-left">
                    <van-icon name="arrow-left" @click="this?.$router.back()" />
                    <span class="title-title-l">歌单</span>
                </div>
                <div class="title-right">
                    <van-icon name="search" />
                    <van-icon name="ellipsis" />
                </div>
            </div>
            <div class="content-box">
                <div class="img-left">
                    <img :src="playDetail.coverImgUrl">
                </div>
                <div class="right-content">
                    <div class="right-title">
                        {{ playDetail.name }}
                    </div>
                    <div class="right-author">
                        <img :src="playDetail.creator.avatarUrl">
                        <span>{{ playDetail.creator.nickname }}</span>
                    </div>
                    <div class="right-desc">
                        <div>{{ playDetail.description }}</div>
                    </div>
                </div>
            </div>
            <div class="icon-content">
                <div class="icon-box">
                    <van-icon name="comment-o" size="0.5rem" />
                    <div>{{playDetail.commentCount}}</div>
                </div>
                <div class="icon-box">
                    <van-icon name="share-o" size="0.5rem" />
                    <div>{{playDetail.shareCount}}</div>
                </div>
                <div class="icon-box">
                    <van-icon name="down" size="0.5rem" />
                    <div>下载</div>
                </div>
                <div class="icon-box">
                    <van-icon name="passed"  size="0.5rem"/>
                    <div>多选</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script lang="ts">
import { reactive } from "vue";
export default {
    setup(props) {
        
   
        return {
            
        };
    },
    props: ["playDetail"]
};
</script>

<style lang="less" scoped>
.icon-content{
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    .icon-box{
        color: #fff;
        text-align: center;
    }
}
.content-box {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;

    .img-left {
        margin-left: 0.5rem;
        margin-top: 0.7rem;
        img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.3rem;
        }
    }

    .right-content {
        margin-left: 0.3rem;
        margin-top: 0.7rem;
        margin-right: 0.2rem;
        height:2.5rem ;
        overflow: hidden;
        display: flex;
        flex-direction: column;
       
        .right-title{
            font-size: medium;
            font-weight: 600;
            color: #fff;

        }

        .right-author {
           display: flex;
           align-items: center;
           flex-wrap: nowrap;
            img {
                width:0.4rem;
                height:0.4rem;
                
                border-radius: 50%;
            }
            span{
                margin-left: 0.2rem;
                font-size: small;

               opacity: 0.6;
                color: #fff;
            }
        }
        .right-desc{
            color: white;
            font-size: small;
            opacity: 0.6;
            height: 1.5rem;
            overflow: hidden;
             text-overflow: ellipsis;

                display: -webkit-box;

                -webkit-line-clamp: 4;

                -webkit-box-orient: vertical;
       
        }
    }
}

.top-part {
    width: 100%;
    height: 6.5rem;
    position: relative;

    // background-image: url(`${playDetail.coverImgUrl}`);
    .bg-img {
        width: 100%;
        height: 100%;
        // opacity: 0.7;
        filter: blur(20px);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .title-box {
        padding: 0.2rem;
        padding-top: 0.3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-left {
            font-size: 0.4rem;
            color: white;

            .title-title-l {
                margin-left: 0.2rem;
                font-weight: 550;
                // z-index: 999;
            }
        }

        .title-right {
            color: white;
            font-size: 0.4rem;

            .van-icon-search {
                margin-right: 0.2rem;
            }
        }

    }
}
</style>